<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<div class="login-container">
    <h1>Login</h1>
    <form id="loginForm">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit">Login</button>
    </form>
</div>
</body>
<script>
    document.getElementById('loginForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止默认提交行为

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        const userData = {
            username: username,
            password: password
        };

        fetch('/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        })
            .then(response => {
                window.location.href = '/index'; // 跳转到首页或其他页面
            })
            .catch(error => {
                console.error('Error:', error);
            });
    });
</script>
<style>
    /* Resetting default margin and padding */
    body, h1, form, input, button {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Arial, sans-serif;
        background-image: url('../img/loginbag.jpg'); /* 请替换为你的背景图片路径 */
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .login-container {
        background-color: rgba(255, 255, 255, 0.9); /* 调整登录框的背景透明度 */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    h1 {
        margin-bottom: 20px;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .input-container {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    label {
        width: 100px;
    }

    input {
        padding: 8px;
        border-radius: 3px;
        border: 1px solid #ccc;
        width: 200px;
    }

    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
</style>
</html>
